import * as echarts from 'echarts'
export const options = {
  areaLineOption: {
    color: ['#FFB202'],
    title: {
      text: '产品销量'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        shadowStyle: { color: 'rgba(255,209,73,0.15)' },
        // linear-gradient(180deg, rgba(255, 178, 2, 0.02) 0%, rgba(255, 209, 73, 0.5) 100%);
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    // dataZoom: {
    //   start: 80,
    //   type: 'inside',
    //   zoomLock: true
    // },
    toolbox: {},
    grid: {
      left: '1%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: true,
        data: [],
        axisLabel: {
          color: '#999'
        },
        axisTick: false,
        // x轴线的颜色以及宽度
        axisLine: {
          show: true,
          lineStyle: {
            color: '#eeeeee'
          }
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLabel: {
          color: '#999'
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#F5F5F5'
          }
        }
      }
    ],
    series: [
      {
        name: '数量',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 3,
          color: '#FFB202'
        },
        label: {
          show: true,
          color: '#ccc'
        },
        legendHoverLink: true,
        showSymbol: false,
        symbolSize: 10,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#FFB202'
            },
            {
              offset: 1,
              color: '#ffffff'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: []
      }
    ]
  },
  lineOption: {
    title: {
      text: '核销/退款量',
      itemGap: 20,
      subtext: '单位：个',
      subtextStyle: {
        fontSize: '12px',
        color: '#999999'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    grid: {
      top: '30%',
      left: '1%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        color: '#999'
      },
      axisTick: false,
      // x轴线的颜色以及宽度
      axisLine: {
        show: true,
        lineStyle: {
          color: '#eeeeee'
        }
      },
      // x轴线的颜色以及宽度
      data: []
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#999'
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#F5F5F5'
        }
      }
    },
    series: [
      {
        data: [],
        type: 'bar',
        barWidth: 20,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#8cb3fd'
            },
            {
              offset: 0.5,
              color: '#669AFD'
            },
            {
              offset: 1,
              color: '#4C8BFE'
            }
          ])
        }
      }
    ]
  },
  lineOptionBigClass: {
    title: {
      text: '核销/退款量',
      itemGap: 40,
      subtext: '单位：个',
      subtextStyle: {
        fontSize: '12px',
        color: '#999999'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    grid: {
      top: '32%',
      left: '1%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        color: '#999'
      },
      axisTick: false,
      // x轴线的颜色以及宽度
      axisLine: {
        show: true,
        lineStyle: {
          color: '#eeeeee'
        }
      },
      // x轴线的颜色以及宽度
      data: []
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#999'
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#F5F5F5'
        }
      }
    },
    color: ['#61DBB4', '#FF869A', '#75BDF3', '#FFAB8B'],
    legend: {
      data: [],
      left: 0,
      icon: 'circle',
      top: 28,
      itemWidth: 5,
      itemHeight: 5,
      lineStyle: {},
      textStyle: {
        fontSize: 12,
        color: '#999999'
      }
    },
    series: []
  },
  // 达人营主播等级占比
  cicleOptionHostLevel: {
    title: {
      text: '达人营主播等级占比'
    },
    color: ['#FF9F71', '#4C84FF', '#F1CD90', '#58CDA2'],
    tooltip: {
      trigger: 'item',
      confine: true,
      // position: [-15, 35],
      textStyle: { fontSize: 12 },
      backgroundColor: 'rgba(255,255,255,1)',
      // extraCssText: 'box-shadow: none',
      borderColor: 'transparent',
      formatter(params = {}) {
        const { data = {} } = params
        return (
          '<span style="text-align:center;color:#333333;display:inline-block;width:100%;padding-bottom:5px;border-bottom:2px solid #F7F7F7;">' +
          data.name +
          '</span>' +
          '<br />' +
          '<span style="color:#999999;text-align:center;display:inline-block;width:100%;padding-top:5px;">' +
          '占比' +
          params.percent +
          '% ' +
          '数量' +
          data.value +
          '</span>'
        )
      }
    },
    grid: {
      top: '5px',
      left: '5px',
      right: '5px',
      bottom: '5px',
      containLabel: true
    },
    legend: {
      bottom: '5%',
      icon: 'circle',
      left: 'center',
      itemWidth: 5,
      itemHeight: 5,
      lineStyle: {},
      textStyle: {
        fontSize: 12,
        color: '#999999'
      }
    },

    center: ['25%', '50%'],
    series: [
      {
        name: '派单主播数',
        type: 'pie',
        radius: ['40%', '55%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        selectedMode: 'single',
        emphasis: {
          label: {
            show: true,
            fontSize: 12,
            formatter: ['{a|派单主播数}', '{b|{c}}'].join('\n'),
            rich: {
              a: {
                color: '#333333',
                lineHeight: 30
              },
              b: {
                color: '#999999'
              }
            }
          },
          scaleSize: 10
        },
        labelLine: {
          show: false
        },
        data: [
          // { value: 1048, name: 'V1' },
          // { value: 735, name: 'V2' },
          // { value: 580, name: 'V3' },
          // { value: 484, name: 'V4' }
        ]
      }
    ]
  },
  // 达人营主播合作频率
  cicleOptionHostCooper: {
    title: {
      text: '达人营主播合作频率'
    },
    color: ['#FF9F71', '#4C84FF', '#F1CD90', '#58CDA2'],
    tooltip: {
      trigger: 'item',
      confine: true,
      // position: [-15, 35],
      textStyle: { fontSize: 12 },
      backgroundColor: 'rgba(255,255,255,1)',
      // extraCssText: 'box-shadow: none',
      borderColor: 'transparent',
      formatter(params = {}) {
        const { data = {} } = params
        return (
          '<span style="text-align:center;color:#333333;display:inline-block;width:100%;padding-bottom:5px;border-bottom:2px solid #F7F7F7;">' +
          data.name +
          '</span>' +
          '<br />' +
          '<span style="color:#999999;text-align:center;display:inline-block;width:100%;padding-top:5px;">' +
          '占比' +
          params.percent +
          '% ' +
          '数量' +
          data.value +
          '</span>'
        )
      }
    },
    grid: {
      top: '5px',
      left: '5px',
      right: '5px',
      bottom: '5px',
      containLabel: true
    },
    legend: {
      bottom: '5%',
      icon: 'circle',
      left: 'center',
      itemWidth: 5,
      itemHeight: 5,
      lineStyle: {},
      textStyle: {
        fontSize: 12,
        color: '#999999'
      }
    },

    center: ['25%', '50%'],
    series: [
      {
        name: '派单主播数',
        type: 'pie',
        radius: ['40%', '55%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        selectedMode: 'single',
        emphasis: {
          label: {
            show: true,
            fontSize: 14,
            formatter: ['{a|派单主播数}', '{b|{c}}'].join('\n'),
            rich: {
              a: {
                color: '#333333',
                lineHeight: 30
              },
              b: {
                color: '#999999'
              }
            }
          },
          scaleSize: 10
        },
        labelLine: {
          show: false
        },
        data: [
          // { value: 1048, name: '1次' },
          // { value: 735, name: '2次' },
          // { value: 580, name: '3次' },
          // { value: 484, name: '<3次' }
        ]
      }
    ]
  },
  // 达人营发片主播占比
  cicleOptionHostActions: {
    title: {
      text: '达人营发片主播占比'
    },
    color: ['#FF9F71', '#4C84FF', '#F1CD90', '#58CDA2'],
    tooltip: {
      trigger: 'item',
      confine: true,
      // position: [-15, 35],
      textStyle: { fontSize: 12 },
      backgroundColor: 'rgba(255,255,255,1)',
      // extraCssText: 'box-shadow: none',
      borderColor: 'transparent',
      formatter(params = {}) {
        const { data = {} } = params
        return (
          '<span style="text-align:center;color:#333333;display:inline-block;width:100%;padding-bottom:5px;border-bottom:2px solid #F7F7F7;">' +
          data.name +
          '</span>' +
          '<br />' +
          '<span style="color:#999999;text-align:center;display:inline-block;width:100%;padding-top:5px;">' +
          '占比' +
          params.percent +
          '% ' +
          '数量' +
          data.value +
          '</span>'
        )
      }
    },
    grid: {
      top: '5px',
      left: '5px',
      right: '5px',
      bottom: '5px',
      containLabel: true
    },
    legend: {
      bottom: '5%',
      left: 'center',
      icon: 'circle',
      itemWidth: 5,
      itemHeight: 5,
      lineStyle: {},
      textStyle: {
        fontSize: 12,
        color: '#999999'
      }
    },

    center: ['25%', '50%'],
    series: [
      {
        name: '派单主播数',
        type: 'pie',
        radius: ['40%', '55%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        selectedMode: 'single',
        emphasis: {
          label: {
            show: true,
            fontSize: 14,
            formatter: ['{a|派单主播数}', '{b|{c}}'].join('\n'),
            rich: {
              a: {
                color: '#333333',
                lineHeight: 30
              },
              b: {
                color: '#999999'
              }
            }
          },
          scaleSize: 10
        },
        labelLine: {
          show: false
        },
        data: [
          // { value: 1048, name: '未发片' },
          // { value: 735, name: '已发片' }
        ]
      }
    ]
  },
  // 有效发片占比
  cicleOptionValidActive: {
    title: {
      text: '有效发片占比'
    },
    color: ['#FF9F71', '#4C84FF', '#F1CD90', '#58CDA2'],
    tooltip: {
      trigger: 'item',
      confine: true,
      // position: [-15, 35],
      // position: function(pos, params, dom, rect, size) {
      //   // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
      //   var obj = { top: 60 }
      //   obj[['left', 'right'][+(pos[0] > size.viewSize[0] / 2)]] = 5
      //   console.log(obj, pos, size)
      //   return obj
      // },
      textStyle: { fontSize: 12 },
      backgroundColor: 'rgba(255,255,255,1)',
      // extraCssText: 'box-shadow: none',
      borderColor: 'transparent',
      formatter(params = {}) {
        const { data = {} } = params
        return (
          '<span style="text-align:center;color:#333333;display:inline-block;width:100%;padding-bottom:5px;border-bottom:2px solid #F7F7F7;">' +
          data.name +
          '</span>' +
          '<br />' +
          '<span style="color:#999999;text-align:center;display:inline-block;width:100%;padding-top:5px;">' +
          '占比' +
          params.percent +
          '% ' +
          '数量' +
          data.value +
          '</span>'
        )
      }
    },
    grid: {
      top: '5px',
      left: '-25px',
      right: '-25px',
      bottom: '5px',
      containLabel: false
    },
    legend: {
      bottom: '5%',
      left: 'center',
      icon: 'circle',
      itemWidth: 5,
      itemHeight: 5,
      lineStyle: {},
      formatter: function(name) {
        if (name && name.endsWith('发片')) {
          return name.slice(0, -2)
        } else {
          return name
        }
      },
      textStyle: {
        fontSize: 12,
        color: '#999999'
      }
    },

    center: ['25%', '50%'],
    series: [
      {
        name: '有效发片数',
        type: 'pie',
        radius: ['40%', '55%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        selectedMode: 'single',
        emphasis: {
          label: {
            show: true,
            fontSize: 14,
            formatter: ['{a|有效发片数}', '{b|{c}}'].join('\n'),
            rich: {
              a: {
                color: '#333333',
                lineHeight: 30
              },
              b: {
                color: '#999999'
              }
            }
          },
          scaleSize: 10
        },
        labelLine: {
          show: false
        },
        data: [
          // { value: 1048, name: '付费' },
          // { value: 735, name: 'CPS' },
          // { value: 580, name: '付费+CPS' },
          // { value: 484, name: '素人' }
        ]
      }
    ]
  }
}
